<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>怀旧版后台管理系统</title>
    <link href="/static/admin/css/default.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/static/admin/easyui1.8.6/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="/static/admin/easyui1.8.6/themes/icon.css" />
    <script type="text/javascript" src="/static/admin/easyui1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="/static/admin/easyui1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/admin/easyui1.8.6/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<h2>后台菜单节点</h2>
<p>右键单击某个节点以显示更多操作。</p>
<a class="easyui-linkbutton" onclick="createTopNode()">创建顶级节点</a>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
    <ul id="nodeTree" class="easyui-tree" data-options="
                url: '/admin/node/index',
                method: 'get',
                animate: true,
                onContextMenu: function(e,node){
                    e.preventDefault();
                    $(this).tree('select',node.target);
                    $('#menuList').menu('show',{
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            ">
    </ul>
</div>
<!-- 右击菜单列表 -->
<div id="menuList" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
    <div onclick="edit()" data-options="iconCls:'icon-edit'">编辑</div>
    <div class="menu-sep"></div>
    <div onclick="removeit()" data-options="iconCls:'icon-remove'">移除</div>
</div>


<!-- 选择icon弹框 -->
<div id="winIcons" style="display: none">
    <table class="easyui-datagrid" id="iconList">
    </table>
    <div id="iconToolBar">
        <input type="text" class="easyui-textbox" data-options="prompt:'名称',icons:[{
                        iconCls:'icon-search',
                        handler: function(e){
                           let words = $(e.data.target).textbox('getValue');
                            $('#iconList').datagrid('reload',{name:words});
                        }
                    }]" id="keywords">
    </div>
</div>

<div id="dlg" class="easyui-dialog" style="width: 500px;height: 500px;padding:10px 20px;" title="新增/编辑" modal="true" closed="true" buttons="#dlg-buttons">
        <form id="add-form" action="" method="post">
            <div style="margin-bottom: 10px">
                <input class="easyui-textbox" readonly name="pname" style="width:100%" data-options="label:'父级:'">
                <input class="easyui-textbox" readonly type="hidden" name="pid" />
                <input class="easyui-textbox" readonly value="0" type="hidden" name="id" />
            </div>
            <div style="margin-bottom: 10px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'名称:',required:true">
            </div>
            <div style="margin-bottom: 10px">
                <input class="easyui-textbox" name="icon" style="width:100%" data-options="label:'图标:',required:false,icons:[{
                        iconCls:'icon-search',
                        handler: function(e){
                            $('#winIcons').window({
                                width:700,
                                height:700,
                                title:'选择图标'
                            });
                        }
                    }]">
            </div>
            <div style="margin-bottom: 10px">
                <input class="easyui-textbox" name="path" style="width:100%" data-options="label:'url地址:',required:true">
            </div>
            <div style="margin-bottom: 10px">
                <input type="text" class="easyui-numberbox" name="sort_val" value="0" data-options="label:'排序值:',min:0,precision:0">
            </div>
            <div style="margin-bottom: 10px">
                <div style="margin-bottom:20px">
                    <label>是否菜单</label>
                    <input class="easyui-radiobutton" name="is_menu" data-options="labelPosition:'after'" value="0" label="非">
                    <input class="easyui-radiobutton" name="is_menu" data-options="labelPosition:'after'" value="1" label="是菜单">
                </div>
            </div>
            <div style="margin-bottom: 10px">
                <div style="margin-bottom:20px">
                    <label>状态</label>
                    <input class="easyui-radiobutton" name="status" value="1" data-options="labelPosition:'after'" label="正常">
                    <input class="easyui-radiobutton" name="status" value="0" data-options="labelPosition:'after'" label="禁用">
                </div>
            </div>
        </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="javascript:subAdd()">保存</a>
</div>

<script type="text/javascript">
    function createTopNode(){
        $('#add-form').form('load',{name:'',icon:'',path:'',pname:'顶级节点',id:0,pid:0});
        $('#dlg').dialog('open');
    }
    function append(){
        var t = $('#nodeTree');
        var node = t.tree('getSelected');
        $('#add-form').form('load',{name:'',icon:'',path:'',pname:node.text,id:0,pid:node.id});
        $('#dlg').dialog('open');
    }
    function edit(){
        var t = $('#nodeTree');
        var node = t.tree('getSelected');
        console.log(node);
        $('#add-form').form('load',{name:node.text,icon:node.icon,path:node.path,pname:'',pid:node.pid,id:node.id});
        $('#dlg').dialog('open');
    }
    function removeit(){
        var node = $('#nodeTree').tree('getSelected');
        $.ajax({
            url:"{:url('admin/Node/del')}",
            method:'post',
            data:{id:node.id},
            success:function (res){
                if(res.code==0){
                    $.messager.show({title:'提示',msg:'移除成功',timeout:2000,showType:'slide'});
                    setTimeout(function (){
                        $('#nodeTree').tree('remove', node.target);
                    },2000)
                } else {
                    $.messager.alert(res.message);
                }
            }
        });
    }
    function subAdd(){
        $.ajax({
            url:"{:url('admin/Node/add')}",
            method:'post',
            data:$('#add-form').serialize(),
            success:function (res){
                if(res.code==0){
                    $.messager.show({title:'提示',msg:'创建成功',timeout:2000,showType:'slide'});
                    setTimeout(function (){
                        $('#dlg').dialog('close');
                    },2000)
                } else {
                    $.messager.alert(res.message);
                }
            }
        });
    }

    $(function (){
        //渲染iconList
       $('#iconList').datagrid({
           url:'/admin/node/iconList',
           rownumbers:true,
           singleSelect:true,
           pagination:true,
           toolbar:'#iconToolBar',
           columns:[[
               {field: 'name',title: '名称',width: 300},
               {field:'', title:'显示', width:100,
                   formatter: function(value,row,index){
                       return '<span style="display: inline-block;width: 32px;height: 32px" class="'+row.name+'">&nbsp;&nbsp;</span>';
                   }}
           ]],
           onClickRow:function (index,row){
               // console.log(row);
               $('#add-form').form('load',{icon:row.name});
               $('#winIcons').window('close');
           }
       })
    });
</script>
</body>
</html>
